<template>
  <view class="container">
	<view class=" mine_header" >
		  <view class="userInfo flex_row_between_center" v-if="memberSliding==false">
			  <view class="flex_row_start_center userInfo_left">
			  	<image :src="userCenterData.memberAvatar" mode="aspectFit" class="userInfo_image"></image>
			    <view v-if="userCenterData &&(userCenterData.memberMobile )">
					<view>
						<span>{{userCenterData.memberMobile }}</span>
					    <span style="margin-left: 16rpx;" v-if="userCenterData && (userCenterData.yesOrNoPackage)"><uni-icons color="#f4953a" fontFamily="CustomFont" :size="20">{{'\ue616'}}</uni-icons></span>
					</view>
					<view class="userInfo_left_label" >
						<span  v-if="userCenterData && (userCenterData.yesOrNoPackage==false)">普通用户</span>
						<span  v-if="userCenterData && (userCenterData.yesOrNoPackage==true)" style="color:#f4953a;font-size: 26rpx;">普通会员</span>
					</view>
				</view>
				<view v-if="(!userCenterData ||(userCenterData && !userCenterData.memberId)) "
				     @click="navTo('/pages/public/login')">登录</view>
			  </view>
			  <view class="flex_row_start_center userInfo_right" @click="navTo('/pages/mine/info')">
			  	<view >个人中心</view>
			  	<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;" ></view>
			  </view>
		  </view>
	</view>
	
	<view class=" vip_cont">
		<view class="flex_row_between_center vip_box"  @click="navTo('/pages/moreModule/myvip/myvip')">
			<view class="flex_row_start_center">
				<view class="vip_title">读道</view>
				<image src="../../static/images/vip.png" mode="aspectFill" class="vip_image"></image>
			</view>
			<uni-icons color="#d7ae5e" type="right" size="22"></uni-icons>
		</view>
	</view>
	<!-- 财富 -->
	<view class="wealth">
		<view class="title">
			财富
		</view>
		<view class="w_list">
			<view class="item" @click="navTo('/pages/moreModule/goldrecharge/goldrecharge')">
				<image class="w_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/gold%20%282%29.png" mode="aspectFill" ></image>
				<view class="cont_text">金币</view>
			</view>
			<view class="item" @click="navTo('/pages/moreModule/mystars/mystars')">
				<image class="w_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E6%98%9F%E6%98%9F.png" mode="aspectFill" ></image>
				<view class="cont_text">小星星</view>
			</view>
			<view class="item" @click="navTo('/pages/moreModule/testreport/testreport')">
				<image class="w_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/bagao.png" mode="aspectFill" ></image>
				<view class="cont_text">测试报告</view>
			</view>
			<view class="item" @click="navTo('/pages/moreModule/mycoupon/mycoupon')">
				<image class="w_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/kajuan.png" mode="aspectFill" ></image>
				<view class="cont_text">卡卷</view>
			</view>
		</view>
	</view>
	<!-- 记录 -->
	<view class="record">
		<view class="title">
			记录
		</view>
		<view class="re_list">
			<view class="item" @click="navTo('/pages/index/archives')">
				<image class="re_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E6%A1%A3%E6%A1%88%E7%BB%9F%E8%AE%A1_%E7%84%A6%E7%82%B9.png" mode="aspectFill"></image>
				<view class="cont_text">档案</view>
			</view>
			<view class="item" @click="navTo('/pages/mine/likeslist')">
				<image class="re_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E6%94%B6%E8%97%8F.png" mode="aspectFill"></image>
				<view class="cont_text">点赞收藏</view>
			</view>
			<view class="item"  @click="navTo('/pages/mine/recordlist')">
				<image class="re_list_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E8%AE%B0%E5%BD%95.png" mode="aspectFill"></image>
				<view class="cont_text">浏览记录</view>
			</view>
		</view>
	</view>
	<view class="mine_list" >
		<view class="mine_list_title">更多</view>
		<!-- <view class="mine_list_item flex_row_between_center">
			<view class="flex_row_start_center">
				<image src="../../static/images/other/share_2.png" mode="aspectFit" class="list_item_icon"></image>
				<view>分享</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view> -->
		<!-- <view class="mine_list_item flex_row_between_center" v-if="auditShow" @click="navTo('/pages/invite/invite')" >
			<view class="flex_row_start_center">
				<image src="../../static/images/other/invite.png" mode="aspectFit" class="list_item_icon"></image>
				<view>推荐码</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view> -->
		<view class="mine_list_item flex_row_between_center"   @click="navTo('/pages/set/set')">
			<view class="flex_row_start_center">
				<image src="../../static/images/other/set.png" mode="aspectFit" class="list_item_icon"></image>
				<view>系统设置</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view>
	</view>
	<loginPop ref="loginPop"  ></loginPop>
	
  </view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
    export default {
		data() {
		  return {
			  statusBarHeight:uni.getSystemInfoSync().statusBarHeight+'px',
			  memberSliding:false,
			  auditShow:false,
		  }
		},
		onLoad(){
			 
			
			// console.log('userCenterData',this.userCenterData);
			// console.log('userInfo',this.userInfo);
		},
	
	computed: {
		...mapState(['hasLogin', 'userInfo', 'userCenterData'])
	},
	mounted(){
	},
	onShow(){
		this.getAudit()
	},
    methods: {
		//获取微信审核开关
		getAudit(){
		    let param = {};
			param.url='v3/system/front/configuration/1'
			this.$request(param).then(res=>{
				console.log(res);
				this.auditShow=res.data.auditSwitch
				
			})
		},
       navTo(url){
		   if(!this.hasLogin){
			   this.$refs.loginPop.openLogin()
			   return false
		   }
		   this.$tab.navigateTo(url)
	   },
	   //提示
	   getToast(){
	   	this.$modal.msg('该功能待开发')
	   },
	   getAi(){
	   	this.$tab.navigateTo('/pages/AI/index')
	   },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f2f2f2;
	
  }
  text {
    font-size: 16px;
    white-space: pre-wrap;
  }
  .AI_image{
	  width: 80rpx;
	  height: 80rpx;
	  position: fixed;
	  right: 30rpx;
	  bottom: 260rpx;
  }
  .container{
	  height: 100%;
	  padding-bottom: 50rpx;
	  // background-color: red;
  }
  .mine_nav{
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 750rpx;
	  padding: 0 30rpx 10rpx 20rpx;
	  background-color: #a76252;
	  
	  .member_info_sliding_left {
	  	text {
	  		margin-left: 20rpx;
	  		font-size: 30rpx;
	  		font-family: PingFang SC;
	  		font-weight: bold;
	  		color: #010101;
	  	}
	  
	  	image {
	  		width: 78rpx;
	  		height: 78rpx;
	  		border: 4rpx solid rgba(255, 255, 255, 0.5);
	  		border-radius: 50%;
	  	}
	  }
  }

  .mine_header {
	
      background: #fff;
	  padding: 10rpx 34rpx;
	  padding: 32rpx 0;
	  // border-radius: 20rpx;
  }
  .userInfo{
	  
	  padding: 0 20rpx 0 22rpx;
	
	  .userInfo_left{
		  font-size: 36rpx;
		  // color:#fff;
		 
		  
		  .userInfo_image{
		  	  width: 100rpx;
		  	  height: 100rpx;
		  	  border-radius: 50%;
		  	  background-color: #c4c4c4;
			  margin-right: 24rpx;
		  }
		  .userInfo_left_label{
				font-size: 20rpx;
				width: 104rpx;
				height: 38rpx;
				border-radius: 24rpx;
				background: #ffffff33;
				display: flex;
				align-items: center;
				justify-content: center;
		  }
	  }
		  
	  .userInfo_right{
		  font-size: 28rpx;
		  // color: #fff;
		  color: #634D37;
		
	  }
  }

.vip_cont{
	background-color: #fff;
	padding: 14rpx 20px;
	.vip_box{
		padding: 14px 16px;
		width: 100%;
		border-radius: 12px;
		background-image: linear-gradient(to  right,#ffe5b6,#fedf9f,#fed184);
	}
	.vip_image{
		width: 60rpx;
		height: 40rpx;
	}
	.vip_title{
		color: #c97835;
		font-size: 32rpx;
		margin-right: 20rpx;
	}
}
// 财富
.wealth{
	 // border-top: 1rpx solid #cecece;
	background-color: #fff;
	padding: 0 40rpx 20rpx;
	border-radius: 0 0 20rpx 20rpx;
	.title{
		font-size: 32rpx;
		// font-weight: 550;
		padding: 20rpx 0;
	}
	.w_list{
		margin-top: 20rpx;
		padding: 0 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.item{
			text-align: center;
			.cont_text{
				font-size: 28rpx;
				font-weight: 550;
				color: #7a7a7a;
			} 
		}
		.w_list_image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
}
 // 记录
 .record{
	 margin-top: 20rpx;
	 background-color: #fff;
	 padding: 0 40rpx 20rpx;
	 border-radius:20rpx;
	 .title{
	 	font-size: 32rpx;
	 	// font-weight: 550;
	 	padding: 20rpx 0;
	 }
	 .re_list{
		 margin-top: 20rpx;
		 padding: 0 50rpx;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 flex-wrap: wrap;
		 .item{
			text-align: center;
			.cont_text{
				font-size: 28rpx;
				font-weight: 550;
				color: #7a7a7a;
				margin-top: 10rpx;
			} 
		}
		.re_list_image{
			width: 80rpx ;
			height: 80rpx;
			border-radius: 50%;
		}
	 }
 }


  

  .mine_list_title{
	  font-size: 32rpx;
	  position: relative;
	  &::after{
		  position: absolute;
		  content: '';
		  width: 8rpx;
		  height: 25rpx;
		  left: -16rpx;
		  top: 6rpx;
		  background-color:rgb(245, 98, 152);
	  }
  }
  .mine_list{
	  margin-top: 10rpx;
	  padding: 20rpx 30rpx 0rpx 30rpx;
	  background-color: #fff;
	  border-radius:16rpx;
	  // padding: 0 48rpx;
	  
	  .mine_list_item{
		  height: 108rpx;
		  border-bottom: 2rpx solid #F6F6F6;
		  color: #313131;
		  font-size: 28rpx;
		  
		  .list_item_icon{
			  width: 36rpx;
			  height: 36rpx;
			  margin-right: 24rpx;
		  }
	  }
	  
  }
  
  .mine_coin{
	  margin: 0 26rpx;
	  background-color: rgb(254, 247, 250);
	  border-radius: 24rpx;
	  height: 122rpx;
	  width: 698rpx;
	  padding: 0 54rpx 0 38rpx;
	  font-size: 32rpx;
	  
	  .mine_coin_image{
		  width: 54rpx;
		  height: 54rpx;
		  margin-right: 16rpx;
	  }
  }
  
  .mine_module{
	  margin: 46rpx 42rpx 52rpx 42rpx;
	  width: 666rpx;
	  height: 96rpx;
	  .mine_module_item{
		  text-align: center;
		  width: 96rpx;
		  height: 92rpx;
		  font-size: 24rpx;
	  }
	  .mine_module_image{
		  width: 48rpx;
		  height: 48rpx;
	  }
  }
  .mine_activity{
	  margin: 0 78rpx 0  50rpx;
	  .mine_activity_item{
		  width: 622rpx;
		  height: 72rpx;
		  // background-color: red;
		  .mine_activity_image{
			  width: 48rpx;
			  height: 48rpx;
		  }
		  .mine_activity_item_left{
			  margin-left: 10rpx;
			  & view:first-child{
				  color: rgb(49, 49, 49);
				  font-size: 28rpx;
			  }
			  & view:last-child{
				  color:rgb(136, 136, 136);
				  font-size: 22rpx;	  
			  }
		  }
		  .mine_activity_item_right{
			  width: 98rpx;
			  height: 48rpx;
			  text-align: center;
			  line-height: 48rpx;
			  font-size: 22rpx;
			  color: rgb(245, 98, 122);
			  background-color: rgb(255, 230, 239);
			  border-radius: 42rpx;
		  }
	  }
	  .mine_activity_b{
		  margin-bottom: 32rpx;
	  }
  }
</style>
